<template>
  <div
    class="select-picker-box"
    v-show="isShow"
  >
    <div class="c-pf c-p-t68 c-p-l0 c-w100 c-h c-pz100 select-picker-shade" @click="handleClickCloseSelect()"></div>
    <div
      class="select-picker c-pf c-p-l0 c-p-t68 c-pz100 c-w100"
      :class="isShow ?'picker-animate-slide-down':''"
    >
      <div class="select-picker-list c-bg-white">
        <div class="c-flex-row c-hh600">
          <div
            class="c-flex-1 c-h c-content-scroll c-scroll-touch menu-scroll-view"
            id="scrollTop"
          >
            <div
              class="c-w100 c-hh100 c-bg-f5 "
              v-for="(item, index) in firstList"
              :key="index"
              @click="swichMenu(item.catId, index, item.name)"
              :class="[index == currentIndex1 - 1?'c-br-br10':'', index == currentIndex1 + 1?'c-br-tr10':'']"
            >
              <div
                class="c-h c-flex-row c-flex-center c-p menu-tab-item"
                :class="[currentIndex1==index?'active':'', index == currentIndex1 - 1?'c-br-br10':'', index == currentIndex1 + 1?'c-br-tr10':'']"
              >
                <p
                  :class="currentIndex1 == index ? 'theme-fc':'c-fc-sblack'"
                  class="c-fs22 c-textAlign-c c-w100 c-ph20 c-text-ellipsis2"
                >{{item.name}}</p>
              </div>
            </div>
            <div
              class="c-fs22 c-fc-gray c-w100 c-hh100 c-textAlign-c c-flex-row c-flex-center"
              v-if="firstList.length == 0"
            >暂无分组</div>
          </div>
          <div
            class="c-flex-1 c-h select-center c-content-scroll c-scroll-touch menu-scroll-view2"
            id="scrollTop2"
          >
            <div
              class="c-w100 c-hh100 select-center "
              v-for="(twoItem, currentTwoIndex) in twoList"
              :key="currentTwoIndex"
              @click="swichMenu2(twoItem.catId, currentTwoIndex, twoItem.name)"
            >
              <div class="c-h c-flex-row c-flex-center menu-tab-item2">
                <p
                  :class="currentIndex2 == currentTwoIndex ? 'theme-fc':'c-fc-sblack'"
                  class="c-fs22 c-textAlign-c c-w100 c-ph20 c-text-ellipsis2"
                >{{twoItem.name}}</p>
              </div>
            </div>
            <div
              class="c-fs22 c-fc-gray c-w100 c-hh100 c-textAlign-c c-flex-row c-flex-center"
              v-if="twoList.length == 0"
            >暂无分组</div>
          </div>
          <div
            class="c-flex-1 c-h c-bg-white c-content-scroll c-scroll-touch menu-scroll-view3"
            id="scrollTop3"
          >
            <div
              class="c-w100 c-hh100 c-bg-white "
              v-for="(threeItem, currentThreeIndex) in threeList"
              :key="currentThreeIndex"
              @click="swichMenu3(threeItem.catId, currentThreeIndex, threeItem.name)"
            >
              <div class="c-h c-flex-row c-flex-center menu-tab-item3">
                <p
                  :class="currentIndex3 == currentThreeIndex ? 'theme-fc':'c-fc-sblack'"
                  class="c-fs22 c-textAlign-c c-w100 c-ph20 c-text-ellipsis2"
                >{{threeItem.name}}</p>
              </div>
            </div>
            <div
              class="c-fs22 c-fc-gray c-w100 c-hh100 c-textAlign-c c-flex-row c-flex-center"
              v-if="threeList.length == 0"
            >暂无分组</div>
          </div>
        </div>
        <div class="c-w100 c-hh120 c-flex-row c-flex-center c-bg-white c-ph24">
          <div
            class="c-flex-row c-w100 c-flex-center c-hh60 c-br32 c-fs24 c-fc-white theme-bg"
            @click="handleClickSubmit()"
          >确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CourseScreen",
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    firstList: {
      type: Array,
      default: []
    },
    twoList: {
      type: Array,
      default: []
    },
    threeList: {
      type: Array,
      default: []
    },
    cateId1: {
      type: Number,
      default: 0
    },
    cateId2: {
      type: Number,
      default: 0,
    },
    cateId3: {
      type: Number,
      default: 0
    },
    firstIndex: {
      type: Number,
      default: 0
    },
    twoIndex: {
      type: Number,
      default: 0
    },
    threeIndex: {
      type: Number,
      default: 0
    }
  },
  watch: {
    isShow() {
      if (this.isShow) {
        document.body.style.position = 'fixed';
      } else {
        document.body.style.position = 'static';
      }
    },
    firstIndex: {
      handler(newVal) {
        this.currentIndex1 = newVal
      },
      deep: true
    },
    twoIndex: {
      handler(newVal) {
        this.currentIndex2 = newVal;
      },
      immediate: true
    },
    threeIndex: {
      handler(newVal) {
        this.currentIndex3 = newVal
      },
      deep: true
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || 'mb5_default',
      currentIndex1: 0,
      currentIndex2: 0,
      currentIndex3: 0,
      menuHeight: 0, //左边菜单的高度
      menuItemHeight: 0, //左边菜单item的高度
    }
  },
  methods: {
    handleClickCloseSelect() {
      this.$emit('handleClickCloseSelect')
    },
    handleClickSubmit() {
      this.$emit('handleClickSubmit')
    },
    swichMenu(catId, index, name) {
      if (index == this.currentIndex1) return;
      this.currentIndex1 = index;
      this.scrollLeftView(index, '.menu-scroll-view', '.menu-tab-item', 'scrollTop');
      this.$emit('swichMenu', catId, index, name);
    },
    swichMenu2(catId, index, name) {
      // if (index == this.currentIndex2) return;
      this.currentIndex2 = index;
      this.scrollLeftView(index, '.menu-scroll-view2', '.menu-tab-item2', 'scrollTop2');
      this.$emit('swichMenu2', catId, index, name);
    },
    swichMenu3(catId, index, name) {
      // if (index == this.currentIndex3) return;
      this.currentIndex3 = index;
      this.scrollLeftView(index, '.menu-scroll-view3', '.menu-tab-item3', 'scrollTop3');
      this.$emit('swichMenu3', catId, index, name);
    },
    scrollLeftView(index, scrollView, scrollItem, ref) {
      this.$nextTick(() => {
        if (this.menuHeight == 0 || this.menuItemHeight == 0) {
          this.getEleHeight(scrollView, 'menuHeight');
          this.getEleHeight(scrollItem, 'menuItemHeight');
        }
        document.getElementById(ref).scrollTo({
          top: index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2,
          behavior: 'smooth'
        })
      })
    },
    getEleHeight(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = document.querySelector(elClass);
        if (!query) {
          setTimeout(() => {
            this.getEleHeight(elClass);
          }, 10);
          return;
        }
        this[dataVal] = query.clientHeight;
      })
    }
  }
}
</script>

<style lang="less" scoped>
.active {
  background: #fafafa;
}
.select-picker-box {
  .select-picker-shade {
    background: rgba(0, 0, 0, 0.5);
  }
  .select-picker-list {
    height: 18rem;
  }
}
.picker-animate-slide-down {
  -webkit-animation: slideDown ease 0.3s forwards;
  animation: slideDown ease 0.3s forwards;
}
@keyframes slideDown {
  from {
    -wekbit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    -wekbit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes slideDown {
  from {
    -wekbit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    -wekbit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.select-center {
  background: #fafafa;
}
</style>